{% extends "base.html" %}

{% block content %}

    <div class="container">
        <div class="col-md-2">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <span style="font-weight: bold">{{ flow.name }}</span>
                    <a href="/flow/flow_chart/{{ flow.fid }}"><span class="glyphicon glyphicon-info-sign"></span></a>
                </div>
                <div class="panel-body">
                    <ul class="nav nav-pills nav-stacked ">
                        {% for node in flow.nodes %}
                            <li class="{% if loop.first %}active{% endif %}">
                                <a href="#{{ node.nid }}" data-toggle="pill">{{ node.name }}({{ node.nid }})</a>
                            </li>
                        {% endfor %}
                    </ul>
                    {#            <div class="panel-footer">Panel footer</div>#}
                </div>
            </div>
        </div>
        <div class="col-md-10">
            {% include 'message.html' %}


            <div class="tab-content vertical-tab-content">

                {% for node in flow.nodes %}

                    <div class="tab-pane {% if loop.first %}active{% endif %}" id="{{ node.nid }}">
                        <div class="row">
                            <div class="col-md-10">
                                <div class="row">
                                    {% include 'flow/node_user_config.html' %}
                                </div>
                                <div class="row">
                                    {% include 'flow/node_role_config.html' %}
                                </div>
                                <div class="row">
                                    {% include 'flow/node_edge_config.html' %}
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="alert alert-info" role="alert">{{ node.doc }}</div>
                            </div>
                        </div>
                    </div>


                {% endfor %}

            </div>

        </div>
    </div>
{% endblock %}